<template>
	<div id="util-demo">
		<h2>
			当前时间{{ parseTime(now, 'yyyy-MM-dd HH:mm:ss 星期E') }}
			<el-button @click="now = new Date()">刷新</el-button>
		</h2>
		<el-table :data="dateFormats">
			<el-table-column prop="f" label="字段" width="100"></el-table-column>
			<el-table-column prop="desc" label="描述" width="250"></el-table-column>
			<el-table-column label="结果" width="100">
				<template #default="scope">
					<span>{{ parseTime(now, scope.row.f) }}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import { parseTime } from '@/utils/date.js';
export default {
	name: 'DateUtilDemo',
	data() {
		return {
			now: new Date(),
			dateFormats: [
				{ f: 'yyyy', desc: '四位年份' },
				{ f: 'yy', desc: '两位年份' },
				{ f: 'MM', desc: '两位月份' },
				{ f: 'M', desc: '一位月份(11,12月除外)' },
				{ f: 'dd', desc: '二位日数' },
				{ f: 'd', desc: '一位日数(除非日数大于10)' },
				{ f: 'HH', desc: '二位小时' },
				{ f: 'H', desc: '一位小时(除非不是0-9点)' },
				{ f: 'mm', desc: '两位分钟' },
				{ f: 'm', desc: '一位分钟(除非分钟大于10)' },
				{ f: 'ss', desc: '二位秒钟' },
				{ f: 's', desc: '一位秒钟(除非秒钟大于10)' },
				{ f: 'E', desc: '中文星期几' },
				{ f: 'e', desc: '数字星期几' }
			]
		};
	},
	methods: {
		parseTime
	}
};
</script>

<style lang="scss">
#util-demo {
	.row {
		display: flex;
		gap: 20px;
	}
}
</style>
